<template>
  <div>
    <el-date-picker
        v-model="year"
        type="year"
        format="yyyy"
        value-format="yyyy"
        @change="handleChangeStart"
    >
    </el-date-picker>
    <div ref="Echart" :style="{width: '1200px', height: '600px'}"></div>
  </div>

</template>

<script>

import * as echarts from 'echarts'
import axios from "axios";
var getchart
export default {
  created() {
    this.flushPage()
  },
  data() {
    return {
      year: new Date().getFullYear() + '',
      name: '月份销售额',
      xData: [],
      yData: [],
    }
  },
  methods: {
    handleChangeStart() {
      this.flushPage()
    },
    flushPage() {

      this.xData=[]
      this.yData=[]
      // 发送请求获取数据
      this.$http.get("/Order/GetSale/" + this.year).then(resp => {
        console.log(resp.data.data)
        resp.data.data.forEach(e => {
          this.xData.push(this.year+"-"+ e.months)
          this.yData.push(e.sales)
        })
        this.$nextTick(() => {
          this.initChart(this.name, this.xData, this.yData)
        });

      })
    },
    initChart(name, xData, yData) {

      getchart = echarts.init(this.$refs.Echart);
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [name],
          bottom: '0%'
        },
        grid: { //调整图表上下左右位置
          top: '10%',
          left: '3%',
          right: '8%',
          bottom: '11%',
          containLabel: true
        },
        // x轴数据
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        // y轴信息，会根据填充的信息自动生成
        yAxis: {
          type: 'value'
        },
        // 填充的信息
        series: [
          {
            name: name,
            type: 'line',
            stack: '总量',
            data: yData,
            smooth: true
          },
        ]
      };
      // 将数据信息填充进去
      getchart.setOption(option);

    },

  }

}
</script>
